<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ToTheHomeList' }">响应研判</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">响应研判单详情</div>
          <div class="InformationDetail-btn">
            <el-row>
              <el-button size="mini" @click="AddFh" class="back-btn">返回</el-button>
            </el-row>
          </div>
        </div>

        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">应急事件：</div>
              </div>
              <div class="information_Sources_content">
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple">
                      <span class="label">应急事件：</span><span>{{ form.emergencyEvent }}</span>

                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <span class="label">事件类别：</span><span>{{ form.eventName }}</span>

                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <span class="label">事件级别：</span><span>{{ form.eventLvName }}</span>

                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <span class="label">影响范围：</span><span>{{ form.effectRange }}</span>

                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <span class="label">发生时间：</span><span>{{ form.occurrenceTime }}</span>

                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple flex-row">
                      <span class="label">事件概要：</span>
                      <p>{{ form.incidentOutline }}</p>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px; padding-left: 160px;">
                  <el-col :span="12" v-for="(item, i) in events" :key="i">
                    <div class="grid-content bg-purple">
                      <router-link tag="p" class="to-event-link" :to="`/EmergencyDetail?id=${item.id}`">{{ item.name
                      }}</router-link>
                      <!-- <el-link type="primary">{{ item.name }}</el-link> -->
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>

            <el-collapse-item name="2">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">灾情信息：</div>
              </div>
              <div style="height: 10px;"></div>
              <div style="overflow-x: auto; width: 100%">
                <el-table border :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' }" ref="multipleTable" :data="tableData" tooltip-effect="dark" size="small" show-summary>
                  <el-table-column prop="unitName" label="所属单位" show-overflow-tooltip align="center" min-width="171">
                  </el-table-column>
                  <el-table-column prop="sdx" label="输电线路" show-overflow-tooltip align="center" v-if="(columnHeaders[0].is_show || columnHeaders[1].is_show || columnHeaders[2].is_show || columnHeaders[3].is_show || columnHeaders[4].is_show || columnHeaders[5].is_show || columnHeaders[6].is_show || columnHeaders[7].is_show)">
                    <el-table-column prop="sdx500" label="500kV及以上" show-overflow-tooltip align="center" v-if="(columnHeaders[0].is_show || columnHeaders[1].is_show)">
                      <el-table-column prop="sdxl500KvTrip" label="累计跳闸" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('sdxl', '500kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.sdxl500KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sdxl500KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="sdx220" label="220kV" show-overflow-tooltip align="center" v-if="(columnHeaders[2].is_show || columnHeaders[3].is_show)">
                      <el-table-column prop="sdxl220KvTrip" label="累计跳闸" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('sdxl', '220kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.sdxl220KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sdxl220KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="sdx110" label="110kV" show-overflow-tooltip align="center" v-if="(columnHeaders[4].is_show || columnHeaders[5].is_show)">
                      <el-table-column prop="sdxl110KvTrip" label="累计跳闸" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('sdxl', '110kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.sdxl110KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sdxl110KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="sdx35" label="35kV" show-overflow-tooltip align="center" v-if="(columnHeaders[6].is_show || columnHeaders[7].is_show)">
                      <el-table-column prop="sdxl35KvTrip" label="累计跳闸" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('sdxl', '35kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.sdxl35KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="sdxl35KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="bdz" label="变电站" show-overflow-tooltip align="center" v-if="(columnHeaders[8].is_show || columnHeaders[9].is_show || columnHeaders[10].is_show || columnHeaders[11].is_show || columnHeaders[12].is_show || columnHeaders[13].is_show || columnHeaders[14].is_show || columnHeaders[15].is_show)">
                    <el-table-column prop="bdz500" label="500kV及以上" show-overflow-tooltip align="center" v-if="(columnHeaders[8].is_show || columnHeaders[9].is_show)">
                      <el-table-column prop="bdz500KvTrip" label="累计停运" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('bdz', '500kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.bdz500KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="bdz500KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="bdz220" label="220kV" show-overflow-tooltip align="center" v-if="(columnHeaders[10].is_show || columnHeaders[11].is_show)">
                      <el-table-column prop="bdz220KvTrip" label="累计停运" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('bdz', '220kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.bdz220KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="bdz220KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="bdz110" label="110kV" show-overflow-tooltip align="center" v-if="(columnHeaders[12].is_show || columnHeaders[13].is_show)">
                      <el-table-column prop="bdz110KvTrip" label="累计停运" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('bdz', '110kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.bdz110KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="bdz110KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="bdz35" label="35kV" show-overflow-tooltip align="center" v-if="(columnHeaders[14].is_show || columnHeaders[15].is_show)">
                      <el-table-column prop="bdz35KvTrip" label="累计停运" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('bdz', '35kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.bdz35KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="bdz35KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="pdxl" label="配电线路" show-overflow-tooltip align="center" v-if="(columnHeaders[16].is_show || columnHeaders[17].is_show)">
                    <el-table-column prop="" label="10kV" show-overflow-tooltip align="center">
                      <el-table-column prop="pdxl10KvTrip" label="累计停运" show-overflow-tooltip align="center" min-width="100">
                        <template slot-scope="scope">
                          <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('pdxl', '10kV', scope.row.emergencyId, scope.row.unitId)">
                            {{ scope.row.pdxl10KvTrip }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="pdxl10KvRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                      </el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="tq" label="台区" show-overflow-tooltip align="center" v-if="(columnHeaders[18].is_show || columnHeaders[19].is_show || columnHeaders[20].is_show)">
                    <el-table-column prop="tqTrip" label="累计停电" show-overflow-tooltip align="center" min-width="100">
                      <template slot-scope="scope">
                        <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('tq', '', scope.row.emergencyId, scope.row.unitId)">
                          {{ scope.row.tqTrip }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="tqRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                    <el-table-column prop="tqRater" label="恢复率" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="yh" label="用户" show-overflow-tooltip align="center" v-if="(columnHeaders[21].is_show || columnHeaders[21].is_show || columnHeaders[23].is_show)">
                    <el-table-column prop="ptyhTrip" label="累计停电" show-overflow-tooltip align="center" min-width="100">
                      <template slot-scope="scope">
                        <span style="color:#3561fd;cursor:pointer;text-decoration: underline;">
                          {{ scope.row.ptyhTrip }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="ptyhRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                    <el-table-column prop="ptyhRater" label="恢复率" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="zyyh" label="重要用户" show-overflow-tooltip align="center" v-if="(columnHeaders[24].is_show || columnHeaders[25].is_show || columnHeaders[26].is_show)">
                    <el-table-column prop="zyyhTrip" label="累计停电" show-overflow-tooltip align="center" min-width="100">
                      <template slot-scope="scope">
                        <span style="color:#3561fd;cursor:pointer;text-decoration: underline;" @click="showShousunDialog('zyyh', '', scope.row.emergencyId, scope.row.unitId)">
                          {{ scope.row.zyyhTrip }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="zyyhRecover" label="累计恢复" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                    <el-table-column prop="zyyhRater" label="恢复率" show-overflow-tooltip align="center" min-width="100">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">研判结果：</div>
              </div>
              <div class="information_Sources_content">
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple"><span class="label">响应研判单：</span>{{ form.judgeName }}</div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="12">
                    <div class="grid-content bg-purple"><span class="label">是否启动响应：</span>{{ form.isResponse == 0 ? "否"
                        : "是"
                    }}</div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light"><span class="label">事件类别：</span>{{ form.eventName }}</div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="display: flex;"><span class="label" style="min-width: 160px;">措施建议：</span>
                      <p style="flex: 1">{{ form.measure }}</p>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple" style="display: flex;"><span class="label" style="min-width: 160px;">研判人：</span>
                      <p style="flex: 1">{{ form.judgeUser }}</p>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple-light"><span class="label">研判时间：</span>{{ form.judgeTime }}</div>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">填报信息：</div>
              </div>
              <div class="information_Sources_content">
                <el-row style="margin-top: 14px;">
                  <el-col :span="8">
                    <div class="grid-content bg-purple"><span class="label">填报人：</span>{{ form.creator }}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light"><span class="label">单位及部门：</span>{{ form.createDeptName }}
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light"><span class="label">填报时间：</span>{{ form.createTime }}
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item name="5" v-if="form.judgeState == 2 || form.judgeState == 3">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">审批信息：</div>
              </div>
              <div class="information_Sources_content">
                <el-row style="margin-top: 14px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple"><span class="label">审批意见：</span>{{ form.approvalOpinion }}</div>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 14px;">
                  <el-col :span="8">
                    <div class="grid-content bg-purple"><span class="label">审批人：</span>{{ form.approvalUser }}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light"><span class="label">单位及部门：</span>{{ form.approvalDept }}
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light"><span class="label">审批时间：</span>{{ form.approvalTime }}
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <!-- 受损设备查看 -->
    <LsdDialog :dialogConfig="dialogConfig1" class="yanpan-jieguo" @close="(dialogConfig1.isShow = false)">
      <!-- <el-dialog title="受损设备查看" :visible.sync="shousunShow" width="50%"> -->
      <div slot="dialog">
        <el-table :data="shousunTable" :header-cell-style="{
          background: '#B1C8F9',
          color: '#000',
        }" style="width: 100%" border>
          <el-table-column prop="lineName" align="center" label="停运输电线路名称" width="180">
          </el-table-column>
          <el-table-column prop="voltageClasses" align="center" label="电压等级" min-width="100">
          </el-table-column>
          <el-table-column prop="unitName" align="center" label="所属单位">
          </el-table-column>
          <el-table-column prop="tripCause" align="center" label="停运/跳闸原因">
          </el-table-column>
          <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
          </el-table-column>
        </el-table>
        <div style="height: 20px"></div>
        <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
          <div class="fontSize14" style="line-height: 28px; margin-right: 10px;">共{{ shousunTableTotal }}条数据，共{{
              calcNum(shousunTableTotal)
          }}页</div>
          <el-pagination background layout="prev, pager, next" :total="shousunTableTotal" @current-change="changeShousunTablePageNum">
          </el-pagination>
        </div>

      </div>
      <!-- </el-dialog> -->
    </LsdDialog>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import {
  getById,
  getJudgeInfoListApi
} from "@/api/EmergencyDisposal/xyyp.js";
import {
  getLeftFlowApi
} from "@/api/EmergencyDisposal/xymld";
import { getInfoDetailList } from "@/api/EmergencyDisposal/zqbs.js";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      activeNames: ["1", "2", "3", "4", "5"],
      activities: [
      ],
      tableData: [],
      form: {},
      events: [],
      columnHeaders: [
        {
          prop: "sdxl500KvTrip",
          is_show: true
        },
        {
          prop: "sdxl500KvRecover",
          is_show: true
        },
        {
          prop: "sdxl220KvTrip",
          is_show: true
        },
        {
          prop: "sdxl220KvRecover",
          is_show: true
        },
        {
          prop: "sdxl110KvTrip",
          is_show: true
        },
        {
          prop: "sdxl110KvRecover",
          is_show: true
        },
        {
          prop: "sdxl35KvTrip",
          is_show: true
        },
        {
          prop: "sdxl35KvRecover",
          is_show: true
        },
        {
          prop: "bdz500KvTrip",
          is_show: true
        },
        {
          prop: "bdz500KvRecover",
          is_show: true
        },
        {
          prop: "bdz220KvTrip",
          is_show: true
        },
        {
          prop: "bdz220KvRecover",
          is_show: true
        },
        {
          prop: "bdz110KvTrip",
          is_show: true
        },
        {
          prop: "bdz110KvRecover",
          is_show: true
        },
        {
          prop: "bdz35KvTrip",
          is_show: true
        },
        {
          prop: "bdz35KvRecover",
          is_show: true
        },
        {
          prop: "pdxl10KvTrip",
          is_show: true
        },
        {
          prop: "pdxl10KvRecover",
          is_show: true
        },
        {
          prop: "tqTrip",
          is_show: true
        },
        {
          prop: "tqRecover",
          is_show: true
        },
        {
          prop: "tqRater",
          is_show: true
        },
        {
          prop: "ptyhTrip",
          is_show: true
        },
        {
          prop: "ptyhRecover",
          is_show: true
        },
        {
          prop: "ptyhRater",
          is_show: true
        },
        {
          prop: "zyyhTrip",
          is_show: true
        },
        {
          prop: "zyyhRecover",
          is_show: true
        },
        {
          prop: "zyyhRater",
          is_show: true
        }
      ],
      shousunShow: false,
      shousunTable: [],
      shousunTablePageNum: 1,
      shousunTableTotal: 0,
      shousun_params: {},
      dialogConfig1: {
        title: "受损设备查看",
        isShow: false // 弹窗显示隐藏
      }
    };
  },
  created() {
    const { id } = this.$route.query;
    this.getDetail(id);
    // this.getDict()
  },
  methods: {
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    },
    getDetail(id) {
      getById({ id }).then(res => {
        this.form = res;
        let { emergencyEventIds, emergencyEvent } = res;
        emergencyEventIds = emergencyEventIds.split(",");
        emergencyEvent = emergencyEvent.split(",");
        this.events = emergencyEventIds.map((item, i) => {
          return {
            name: emergencyEvent[i],
            id: item
          };
        });

        this.getJudgeInfoList(res.emergencyId);
        this.getLeftFlow(res.emergencyId);
      });
    },
    // 根据应急事件获取灾情信息
    getJudgeInfoList(emergencyId) {
      getJudgeInfoListApi({ emergencyId }).then(res => {
        if (res.length) {
          this.tableData = res;
          const { columnHeaders } = this;
          const arr = columnHeaders.map(colum_item => {
            return {
              prop: colum_item.prop,
              is_show: res.some(item => {
                console.log(colum_item.prop, item[colum_item.prop] && item[colum_item.prop] != 0);
                return item[colum_item.prop] && item[colum_item.prop] != 0;
              })
            };
          });

          this.columnHeaders = arr;
        }
      });
    },
    async getLeftFlow(emergencyId) {
      try {
        const res = await getLeftFlowApi({ emergencyId });
        this.activities = res;
      } catch (error) {
        console.log(error);
      }
    },
    // 受损设备分页切换
    changeShousunTablePageNum(val) {
      this.shousunTablePageNum = val;
      this.getShousunData();
    },
    showShousunDialog(specialtyCode, voltageClasses, emergencyId, unitId) {
      this.shousun_params = {
        pageNum: this.shousunTablePageNum,
        pageSize: 10,
        specialtyCode,
        emergencyId,
        unitId,
        voltageClasses
      };
      this.dialogConfig1.isShow = true;
      this.getShousunData();
    },
    // 获取受损列表数据
    async getShousunData() {
      const res = await getInfoDetailList(this.shousun_params);
      this.shousunTableTotal = res.total;
      this.shousunTable = res.data;
    },
    // 计算分页页数
    calcNum(val) {
      if (val < 10) {
        return 1;
      } else {
        return Math.ceil(val / 10);
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../../assets/style/common.less";
@import "../../../../assets/style/ComponentStyle.less";
@import "../../../../assets/style/pop-upNotification.less";

.flex-row {
  display: flex;

  .label {
    min-width: 160px;
  }

  p {
    word-wrap: break-word;
    word-break: break-all;
  }
}

.back-btn {
  padding: 8px 18px;
}

:deep(.el-table .cell) {
  font-size: 16px;
}

.label {
  display: inline-block;
  width: 160px;
  text-align: right;
}

.EmergencyDetail-zt {
  :deep(.el-icon-arrow-right:before) {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    background: url("../../../../assets/img/downArrow1.png") no-repeat center;
    background-size: 10px 10px;
    // transform: rotate(-180deg);
  }
}

:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(180deg);
}

:deep(::-webkit-scrollbar) {
  height: 12px;
}

:deep(.el-collapse-item__content) {
  font-size: 16px;
}

.EmergencyDetail {
  width: 100%;
  height: 100%;

  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-collapse-item__wrap) {
    border-bottom: none;
  }

  :deep(.el-collapse-item__header) {
    border-bottom: 1px solid #ccc;
  }

  .to-event-link {
    display: inline-block;
    color: #3270ff;
    text-decoration: underline;
    cursor: pointer;
  }

  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;

      // padding: 0 10px;
      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        position: relative;
        padding: 20px 0;

        .EmergencyDetail-top {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }

        .InformationDetail-btn {
          position: absolute;
          right: 5px;
          bottom: 5px;
          text-align: right;
        }
      }

      .EmergencyDetail-zt {
        // width: 98%;
        height: 88%;
        overflow-y: auto;
        margin: 0 auto;
        padding: 0 30px;

        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }

        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .leftLine {
          width: 6px;
          height: 20px;
          background: #236dfe;
          border-radius: 4px;
          margin: auto 8px auto 0;
        }

        .task_distribution {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 30px 20px 30px;
        }
      }
    }
  }
}
</style>
